{% extends 'base/base.html' %}
{% load static %}

{% block extra-css0 %}
  <link rel="stylesheet" href="{%static 'idcops/css/index/custom.css'%}">
{% endblock extra-css0 %}

{% block content-header %}
  <h1> {{request.user.onidc.name}}
    <small>{{request.user.onidc.desc}}概览</small>
  </h1>

{% endblock %}
{% block breadcrumb %}
  <li><a href="{% url 'idcops:index' %}">
    {% if meta %}{{meta.logo}}{% else %}仪表盘{% endif %}
  </a></li>
  <li class="active">仪表盘</li>
{% endblock %}



{% block main-content %}
<div class="row">
  {%for item in state_items%}
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="info-box">
      <span class="info-box-icon">
          <i class="fa {{item.icon}}"></i>
      </span>
      <div class="info-box-content">
        <a href="{%url 'idcops:list' item.model_name%}">
          <span class="info-box-text">{{item.verbose_name}}</span>
        </a>
        <div>
          <span class="info-box-number">{{item.count}}<small> {{item.metric}}</small></span>
          {% if item.model_name == 'rack' %}<span class="text-muted">仅计算已启用的机柜</span>{% endif %}
        </div>
      </div>
      <!-- /.info-box-content -->
    </div>
    <!-- /.info-box -->
  </div>
  <!-- /.col -->
  {%endfor state_items%}
  <div class="clearfix visible-sm-block"></div>
</div>

<div class="row">
  <div class="col-md-7 col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">月度设备变更统计</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
          </button>
          <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
      </div>
      <div class="box-body">
        <div id="device_dynamic_change" style="min-width:320px;height:400px"></div>
      </div>
    </div>
  </div>

  <div class="col-md-5 col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">在线设备类型或标签统计</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
          </button>
          <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
      </div>
      <div class="box-body">
        <div id="online_statistics" style="min-width:320px;height:400px"></div>
      </div>
    </div>
  </div>
</div>


<div class="row">
  <div class="col-md-7 col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">月度机柜变化统计</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
          </button>
          <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
      </div>
      <div class="box-body">
        <div id="rack_dynamic_change" style="min-width:320px;height:400px"></div>
      </div>
    </div>
  </div>

  <div class="col-md-5 col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">已启用机柜信息统计</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
          </button>
          <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
      </div>
      <div class="box-body">
        <div id="rack_statistics" style="min-width:320px;height:400px"></div>
      </div>
    </div>
  </div>
</div>

</div>
{%endblock%}
{% block extra-js %}

<script src="{%static 'idcops/js/highcharts.js'%}"></script>
<script>
// Build the chart

// 创建渐变色
var scancolors = ['#40c39f', '#2e94f4', '#7355b0'];
Highcharts.getOptions().colors = Highcharts.map(scancolors, function (scancolors) {
    return {
        // radialGradient: { cx: 0, cy: -0.3, r: 5 },
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 2},
        stops: [[0, scancolors], [1, Highcharts.Color(scancolors).brighten(0.5).get('rgb')]]
    };
});

// 已启动机柜信息统计
Highcharts.chart('rack_statistics', {
	chart: {
    backgroundColor: 'transparent',
    // margin: [50, 50, 50, 50],
		type: 'pie'
	},
  colors: ['#3168ff', '#40ebfd', '#41e0aa', '#957cfe', '#4d81e7'],
	title: {
		text: null
	},
  tooltip: {
      headerFormat: '{series.name}<br>',
      pointFormat: '{point.name}: <b>{point.y} 个</b>'
  },
  plotOptions: {
      pie: {
          innerSize: '60%',
          allowPointSelect: true,
          cursor: 'pointer',
          borderColor: '#191a36',
          borderWidth: 5,
          dataLabels: {
              enabled: true,
              // 通过 format 或 formatter 来格式化数据标签显示
              //format: '值: {point.y} 占比 {point.percentage} %',
              formatter: function() {
                  //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
                  return '<span>'+this.point.name+'：<span style="color: #fff; font-size: 1.6em">' + this.y + ' 台</span></span>';
              },
              color: '#02e0ea',
              connectorColor: '#4a4b68',
              style: {
                textOutline: 'none'
              }
          },
          showInLegend: true  // 显示在图例中
      }
  },
  legend: {
    labelFormatter: function () {
				return '<span style="color:#fff">'+this.name+'</span>';
			}
  },
	series: [{
		name: '',
		colorByPoint: true,
		data: [{% for rs in rack_statistics %}['{{rs.0}}',{{ rs.1 }}],{% endfor %}]
	}]
});

// 在线设备类型或标签统计
Highcharts.chart('online_statistics', {
	chart: {
		backgroundColor: 'transparent',
		type: 'column'
	},
  // colors: ['#3168ff', '#40ebfd', '#41e0aa', '#957cfe', '#4d81e7'],
	title: {
		text: null
	},
  tooltip: {
    headerFormat: '{series.name}<br>',
    pointFormat: '{point.name}: <b>{point.y} 台</b>'
  },
  yAxis: {
    min: 0,
    title: null,
    gridLineColor: '#4a4b68'
  },
  plotOptions: {
      pie: {
          innerSize: '60%',
          allowPointSelect: true,
          cursor: 'pointer',
          borderColor: '#191a36',
          borderWidth: 5,
          dataLabels: {
              enabled: true,
              // 通过 format 或 formatter 来格式化数据标签显示
              //format: '值: {point.y} 占比 {point.percentage} %',
              formatter: function() {
                  //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
                  return '<span>'+this.point.name+'：<span style="color: #fff; font-size: 1.6em">' + this.y + ' 台</span></span>';
              },
              color: '#02e0ea',
              connectorColor: '#4a4b68',
              style: {
                textOutline: 'none'
              }
          },
          showInLegend: true // 显示在图例中
      }
  },
  legend: {
    labelFormatter: function () {
				return '<span style="color:#fff">'+this.name+'</span>';
			}
  },
	series: [{
		name: '在线设备',
		colorByPoint: true,
		data: [{% for os in online_statistics %}["{{os.0}}",{{ os.1 }}],{% endfor %}]
	}]
});

// 月度设备变化统计
var chart = Highcharts.chart('device_dynamic_change',{
    // colors: ['#40c3f9', '#2c95f4', '#7354b0'],
    chart: {
      backgroundColor: 'transparent',
      type: 'column'
    },
    title: {
        text: null
    },
    xAxis: {
        categories: {{device_dynamic_change.categories|safe}},
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: null,
        gridLineColor: '#4a4b68'
    },
    tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.0f} 台</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0,
            pointWidth: 20
        }
    },
    legend: {
      labelFormatter: function () {
          return '<span style="color:#fff">'+this.name+'</span>';
        }
    },
    series: [{
        name: '上架',
        data: {{device_dynamic_change.moveup}}
    }, {
        name: '迁移',
        data: {{device_dynamic_change.moving}}
    }, {
        name: '下架',
        data: {{device_dynamic_change.movedown}}
    }]
});

// 月度机柜变化统计
var chart = Highcharts.chart('rack_dynamic_change',{
    // colors: ['#00a65a', '#dd4b39'],
    chart: {
      backgroundColor: 'transparent',
      type: 'column'
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    xAxis: {
        categories: {{rack_dynamic_change.categories|safe}},
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: null,
        gridLineColor: '#4a4b68'
    },
    tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.0f} 个</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0,
            pointWidth: 20
        }
    },
    legend: {
      labelFormatter: function () {
          return '<span style="color:#fff">'+this.name+'</span>';
        }
    },
    series: [{
        name: '增加',
        data: {{rack_dynamic_change.renew}}
    }, {
        name: '减少',
        data: {{rack_dynamic_change.release}}
    }]
});

$("svg.highcharts-root text.highcharts-credits").remove();
</script>
{% endblock %}
